<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation
	<a class="m-link" href="https://material.angular.io/components/datepicker/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicDatepicker">
			<div class="m-section">
				<span class="m-section__sub">
					The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components and directives that work together.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<mat-form-field>
						<input matInput [matDatepicker]="picker" placeholder="Choose a date">
						<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
						<mat-datepicker #picker></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDatepickerStartDate">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field>
						<input matInput [matDatepicker]="picker2" placeholder="Choose a date">
						<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
						<mat-datepicker #picker2 startView="year" [startAt]="startDate"></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDatepickerSelectedValue">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field>
						<input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
						<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
						<mat-datepicker #picker1></mat-datepicker>
					</mat-form-field>
					<div class="m-separator m-separator--dashed"></div>
					<mat-form-field>
						<input matInput [matDatepicker]="picker3" placeholder="Angular forms (w/ deserialization)" [formControl]="serializedDate">
						<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
						<mat-datepicker #picker3></mat-datepicker>
					</mat-form-field>
					<div class="m-separator m-separator--dashed"></div>
					<mat-form-field>
						<input matInput [matDatepicker]="picker4" placeholder="Value binding" [value]="date.value">
						<mat-datepicker-toggle matSuffix [for]="picker4"></mat-datepicker-toggle>
						<mat-datepicker #picker4></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDatepickerWithMinMaxValidation">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field class="example-full-width">
						<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker5" placeholder="Choose a date">
						<mat-datepicker-toggle matSuffix [for]="picker5"></mat-datepicker-toggle>
						<mat-datepicker #picker5></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDatepickerWithFilterValidation">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field class="example-full-width">
						<input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker6" placeholder="Choose a date">
						<mat-datepicker-toggle matSuffix [for]="picker6"></mat-datepicker-toggle>
						<mat-datepicker #picker6></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>
	</div>

	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleDatepickerInputAndChangeEvents">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field>
						<input matInput [matDatepicker]="picker7" placeholder="Input & change events" (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
						<mat-datepicker-toggle matSuffix [for]="picker7"></mat-datepicker-toggle>
						<mat-datepicker #picker7></mat-datepicker>
					</mat-form-field>
					<div class="m-separator m-separator--dashed" *ngIf="events && events.length > 0"></div>
					<div class="m-demo" *ngIf="events && events.length > 0">
						<div class="m-demo__preview">
							<div *ngFor="let e of events">{{e}}</div>
						</div>
					</div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDisabledDatepicker">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field>
						<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
						<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
						<mat-datepicker #dp1></mat-datepicker>
					</mat-form-field>
					<div class="m-separator m-separator--dashed"></div>
					<mat-form-field>
						<input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
						<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
						<mat-datepicker #dp2></mat-datepicker>
					</mat-form-field>
					<div class="m-separator m-separator--dashed"></div>
					<mat-form-field>
						<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
						<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
						<mat-datepicker #dp3 disabled="false"></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDatepickerTouchUI">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field class="example-full-width">
						<input matInput [matDatepicker]="picker8" placeholder="Choose a date">
						<mat-datepicker-toggle matSuffix [for]="picker8"></mat-datepicker-toggle>
						<mat-datepicker touchUi="true" #picker8></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleDatepickerOpenMethod">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field class="example-full-width">
						<input matInput [matDatepicker]="picker9" placeholder="Choose a date">
						<mat-datepicker #picker9></mat-datepicker>
					</mat-form-field>
					<button mat-raised-button (click)="picker9.open()">Open</button>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleUsesMomentJsDates">
			<div class="m-section">
				<div class="m-section__content">
					<mat-form-field>
						<input matInput [matDatepicker]="dp10" placeholder="Moment.js datepicker" [formControl]="date10">
						<mat-datepicker-toggle matSuffix [for]="dp10"></mat-datepicker-toggle>
						<mat-datepicker #dp10></mat-datepicker>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>
		

	</div>
</div>